<template>
  <div>
    <div class="date-time">
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-button type="primary" @click="searchOrderInfo">查询</el-button>
    </div>

    <el-card class="box-card" ref="main"> </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { orderStatementInfo } from '@/req/orderAjax'
import moment from 'moment'
export default {
  data () {
    return {
      value1: [new Date(2020, 4, 5, 10, 10), new Date(2021, 10, 11, 10, 10)],
      orderTimeArr: [],
      orderAmount: [],
      option: {
        title: {
          text: '销售订单信息',
          textStyle: {
            top: 150,
            left: 10,
            fontSize: '14px'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['订单数量']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ''
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单数量',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: ''
          }
        ]
      },
      myChart: ''
    }
  },
  async created () {},
  mounted () {
    this.$nextTick(() => {
      this.getInfo()
    })
  },
  methods: {
    async getInfo () {
      const { data } = await orderStatementInfo({
        date: JSON.stringify(this.value1)
      })
      this.orderTimeArr = data.map(el => {
        return moment(el.orderTime).format('YYYY-MM-DD')
      })

      this.orderAmount = data.map(el => {
        return el.orderAmount
      })
      // 发送请求
      this.myChart = echarts.init(this.$refs.main.$el)
      // 指定图表的配置项和数据
      this.option.series[0].data = this.orderAmount
      this.option.xAxis[0].data = this.orderTimeArr
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option)
    },

    async searchOrderInfo () {
      const { data } = await orderStatementInfo({
        date: JSON.stringify(this.value1)
      })

      data.forEach(el => {
        return (el.orderTime = moment(el.orderTime).format('MM-DD'))
      })

      // const timer = data.map(el => {
      //   return el.orderTime
      // })
      // 去重后的 时间数组
      // const arr = [...new Set(timer)]
      // const res = arr.map(el => {
      //   const obj = {}
      //   obj.orderTime = el
      //   obj.orderAmount = 0
      //   return obj
      // })

      const o = {}
      data.forEach(el => {
        if (o[el.orderTime]) {
          o[el.orderTime] += el.orderAmount
        } else {
          o[el.orderTime] = el.orderAmount
        }
      })
      console.log(o)

      this.orderTimeArr = data.map(el => {
        return moment(el.orderTime).format('MM-DD')
      })

      this.orderAmount = data.map(el => {
        return el.orderAmount
      })
      this.option.series[0].data = this.orderAmount
      this.option.xAxis[0].data = this.orderTimeArr
    }
  }
}
</script>

<style lang="less" scoped>
.el-range-editor.el-input__inner {
  margin-top: 30px;
}
.el-button {
  margin-left: 50px;
}

.el-card {
  margin-top: 60px;
}
.box-card {
  height: 400px;
}
.date-time {
  width: 100%;
}
</style>
